<template>
	<div class="big_bg">
			<div class="big_bg_1" v-if="mycouponsdata">
				<div class="big_bg_2 mycouponsStyle">
						<h1 class="bg_tp">恭喜您获得</h1>
                        <div class="bg_md">
                            <div :class="{'moreHeight' :mycouponsdata.length>1}"  style="overflow:auto;">
                                <ul class="mycoupon_list">
                                    <li v-for="val in mycouponsdata" style="text-align: left;" :key="val">
                                        <div class="account_money">
                                            <div class="moneyclss">
                                                <span class="unit" v-if="val.couponDto.couponAmount">¥</span>
                                                <span>{{pricetwo(1,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span><span class="unit" v-if="val.couponDto.couponAmount">{{pricetwo(2,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span>
                                                <span class="unit" v-if="val.couponDto.couponDiscount">折</span>
												<p v-if="val.couponDto.useRestriction==1">满{{val.couponDto.fullElement}}元使用</p>
                                            </div>
                                        </div>
                                        <dl>
                                            <dt>
												{{val.couponDto.couponName}}<br />
                                                <span class="usePlatspan" :class="useplatcolor(val.couponDto.usePlatform)">{{useterrace(val.couponDto.usePlatform)}}</span> 
                                            </dt>                                                                     
											<p v-if='val.availableStartTime'>有效期:{{val.availableStartTime}}-{{val.availableEndTime}}</p>
											<!-- <p v-if='val.availableStartTime'>开始时间:{{val.availableStartTime}}</p>
                                            <p v-if='val.availableEndTime'>结束时间:{{val.availableEndTime}}</p> -->
                                        </dl>
                                    </li>
                                </ul>
                            </div>
							<h4 v-if="mycouponsdata.length">{{mycouponsdata.length}}张宁家鲜生优惠券</h4>
                        </div>    
						<div class="bg_bt"><span class="bt" @click="goOpen">立刻收下</span></div>
				</div>
			</div>	
		</div>
</template>
<script>
	import Vue from "vue";
	import axios from "axios";
	import { Toast } from "@/utils/toast.js";

	export default {
		props: {
			mycouponsdata: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
			}
		},
		computed: {

		},
		methods: {
			//价格小数点后两位
			pricetwo(num, amount, discount) {
				if(num == 1 && discount) {
					return discount
				} else if(num == 1 && amount) {
					return String(amount).split('.')[0];

				} else if(num == 2 && amount) {
					if(String(amount).split('.')[1]) {
						return "." + String(amount).split('.')[1];
					} else {
						return ""
					}

				}
			},
			useplatcolor(item){
				var arr = item.split(',')
				if(arr.indexOf('wap')>-1 && arr.indexOf('offline')<0){
					return 'usePlatspan1'
				}else if(arr.indexOf('offline')>-1 && arr.indexOf('wap')<0){
					return 'usePlatspan2'
				}else if(arr.indexOf('wap')>-1 && arr.indexOf('offline')>-1){
					return 'usePlatspan3'
				}
			},
			//使用平台的获取
			useterrace(item) {
				var arr = item.split(',')
				if(arr.indexOf('wap')>-1 && arr.indexOf('offline')<0){
					return '商城用'
				}else if(arr.indexOf('offline')>-1 && arr.indexOf('wap')<0){
					return '体验中心用'
				}else if(arr.indexOf('wap')>-1 && arr.indexOf('offline')>-1){
					return '商城体验中心通用'
				}
				/*let use1 = item.replace(/WAP/, "wap")
				let use2 = use1.replace(/PC/, "pc")
				let use3 = use2.replace(/offline/, "线下")
				return use3*/
			},
			//优惠券使用范围
			useRangefn(item) {
				if(item.couponDto.useRange == 1) {
					if(item.couponDto.preferentialRange.promotionGoodsList.length == 1) {
						return item.couponDto.preferentialRange.promotionGoodsList[0].goodsName + "卡券"
					} else {
						return "商品类卡券"
					}
				} else if(item.couponDto.useRange == 2 || item.couponDto.useRange == 5) {
					if(item.couponDto.preferentialRange.promotionClassList.length == 1) {
						return item.couponDto.preferentialRange.promotionClassList[0].className + "卡券"
					} else {
						return "品类卡券"
					}
				} else if(item.couponDto.useRange == 3) {
					if(item.couponDto.preferentialRange.promotionBrandList.length == 1) {
						return item.couponDto.preferentialRange.promotionBrandList[0].brandName + "卡券"
					} else {
						return "品牌类卡券"
					}
				} else if(item.couponDto.useRange == 4) {
					return "全场卡券"
				}
			},
			goOpen() {
				this.$emit('goOpenConpons')
			}
		},
		created() {

		},
		mounted() {

		},
		beforeDestroy() {

		},
		watch: {
			mycouponsdata(newVal) {
				console.log(newVal, "couponsccc");
			}
		}

	}
</script>

<style scoped>
	.big_bg {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		z-index: 99999;
		top: 0;
		left: 0;
		color: #000;
        overflow: hidden;
		display: flex;
		justify-content: center;
	}
	.big_bg_1 {
		width: 280px;
		margin: 0 auto;
		position: absolute;
		top: 54%;
		left: 50%;
	}
	.big_bg_2 {
		height: 50%; 
		transform: translate3d(-50%, -50%, 0);
		/* transition: .2s; */
		/* background: url(../../../static/image/big_bg.png) no-repeat; */
		/* padding:0 0 1.5rem; */
	}
	.big_bg_2 li .icon {
		width: auto;
		vertical-align: middle;
		display: inline-block;
		width: 1.2rem;
		margin-right: 0.6rem;
		color: #39af37;
	}
	.big_bg_2 .bg_tp{
        height: 72px;
		line-height: 72px;
		color: #e8ad48;
		text-align: center;
		font-weight: normal;
		font-size: 0.9rem;
		background-image: url(../../../static/image/tp.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
    .bg_md {
         background-image: url(../../../static/image/md.png);
		 background-repeat: no-repeat;
		 background-size: 100% 100%;
    }
	.big_bg_2 ul {
		padding: 0.5rem 1.8rem 0;
	}
	.big_bg_2 ul li {
		line-height: 1.8rem;
		font-size: 0.6rem;
	}
    .big_bg_2 .bg_bt {
        height: 120px;
        background-image: url(../../../static/image/bt.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
        padding-top: 3rem;
        box-sizing: border-box;
		margin-top: -10px;
    }
	.big_bg_2 .bt {
		background: #ffdb49;
		color: #cd7514;
		display: inline-block;
		padding: 0.3rem 2rem;
		border-radius: 1rem;
		font-size: 1rem;
	}


    .mycouponsStyle .mycoupon_list li {
		background: #fff;
		box-shadow:0px 0px 8px #ccc;
        /* -moz-box-shadow:2px 2px 5px #ccc; 
        -webkit-box-shadow:2px 2px 5px #ccc; 
        box-shadow:2px 2px 5px #ccc; */
        margin-bottom: 0.5rem;
		display: table;
		width: 100%;
	}
	
	.mycouponsStyle .mycoupon_list li dl {
		text-align: left;
		white-space: normal;
        padding:0.2rem 0 0.2rem 0.2rem;
        display: table-cell;
        white-space: nowrap;
        vertical-align: middle;
        line-height: 1.3rem;
		box-sizing: border-box;
	}
	.mycouponsStyle .mycoupon_list li dl dt {
		font-weight: normal !important;
        color: #333;
		font-size: 0.6rem;
		/* margin: 0.2rem 0 0 0; */
		line-height: normal;
        line-height: 0.85rem;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		max-width: 7rem;
	}
	.mycouponsStyle .mycoupon_list li dl p {
		font-size: 0.5rem;
		white-space:nowrap;
		line-height: 0.5rem;
		height: 0.6rem;
		margin-top: 0.2rem;
	}
	
	.mycouponsStyle .mycoupon_list li dl dd {
		font-size: 0.5rem;
		line-height: 0.5rem;
		color: #999;
	}
	
	.mycouponsStyle .mycoupon_list li::after,
	.mycouponsStyle .mycoupon_list li::before {
		left: 4.5rem;
	}
	.mycoupon_list .usePlatspan  {
        background: #f38c22;
        color: #fff;
        border-radius: 8px;
        font-size: 0.4rem;
        padding:2px 5px;
    }
	.mycouponsStyle .mycoupon_list li .account_money .unit {
		font-size: 0.6rem;
	}
	
	.mycouponsStyle .mycoupon_list li .account_money {
		height: 3rem;
        /* line-height: 3rem; */
        /* margin: 1rem 0; */
        text-align: center;
        border-right: none;
        /* display: table-cell; */
        vertical-align: middle;
		color: #fff;
        background: #fbb95d;
		width: 62px;
	}
	.bg_md h4 {
        color: #cd7514;
        font-size: 0.8rem;
		padding-top: 1rem;
    }
	.mycouponsStyle .mycoupon_list li .account_money span {
		font-size: 0.9rem;
		display: inline-block;
	}
	.moreHeight {
		height: 175px;
	}
	.availableTime {
		color: #999;
		font-size: 0.6rem
	}
	.moneyclss {
		/* display: flex; */
		line-height: 0.8rem;
		padding: 1rem 0
	}
	.moneyclss p {
		color: #fff;
		font-size: 0.4rem;
		white-space: nowrap;

	}
</style>